<template>
    <view class="info-wrap u-flex u-row-between">
        <!-- 主播信息 -->
        <view class="an-infos" @tap="showUser">
            <image :src="anchorInfo.headimgurl ? baseUrl + anchorInfo.headimgurl : defaultAvatar" class="avtar" />
            <view class="info u-flex u-col-center">
                <view class="an-name">{{anchorInfo.nick_name}}</view>
                <view class="an-fans">本场共获 {{likeNum}} 赞</view>
            </view>
        </view>
        <view @tap="showOnlineUser" class="online" >
			<view class="u-flex u-row-right u-col-center">
				<view v-if="index < 3" v-for="(item, index) in onlineUser" :class="'order-' + (index + 1)">
					<image :src="item.headimgurl ? baseUrl + item.headimgurl : defaultAvatar" class="avtar" />
				</view>
				<view class="watch-num">{{onlineUserNum}}</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default{
        props: {
            anchorInfo: {},
            onlineUser: {},
			onlineUserNum: 0,
			likeNum: 0
        },
        data() {
            return {
				baseUrl: this.config.baseUrl,
				defaultAvatar: '/static/public/images/headimgurl.jpg'
			}
        },
        methods: {
            showOnlineUser() {
              this.$emit('show-online-user')
            }
        },
        computed: {},
        watch: {},
    }
</script>
<style type="scss">
    .avtar {
        width: 72rpx;
        height: 72rpx;
        display: inline-block;
        vertical-align: middle;
        border-radius: 36rpx;
        overflow: hidden;
    }
    .info {
        display: inline-block;
        color: #000;
        vertical-align: middle;
        padding-left: 10rpx;
        max-width: 220rpx;
    }
    .attention {
        width: 94rpx;
        height: 60rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
        border-radius: 30rpx;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #FF5353;
        letter-spacing: 0;
        text-align: center;
        display: inline-block;
        padding: 0;
        line-height: 60rpx;
        vertical-align: middle;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
    }
    .an-infos {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 40rpx;
        width: 322rpx;
        height: 80rpx;
        padding: 4rpx;
        position: relative
    }
    .an-name {
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }
    .an-fans {
        font-family: PingFangSC-Regular;
        font-size: 10px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: left;
        margin-top: 8rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }
    .info-wrap {
        padding: 80rpx 20rpx;
    }
    .room-id-info {
        width: 300rpx;
        height: 24rpx;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 40rpx;
        border-radius: 40rpx;
        font-family: PingFangSC-Regular;
        font-size: 10px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 24rpx;
        padding: 8rpx;
        margin-top: 10rpx;
    }
    
    [class*='order-'] {
        width: 64rpx;
		height: 64rpx;
		overflow: hidden;
		position: relative;
    }
	[class*='order-'] .avtar{
		position: absolute;
		bottom: 2rpx;
		right: 2rpx;
		width: 48rpx !important;
		height: 48rpx !important;
	}
	.order-1{
		background: url("../../static/images/live/order-1.png") no-repeat;
		background-size: 100%;
	}
	.order-2{
		background: url("../../static/images/live/order-2.png") no-repeat;
		background-size: 100%;
	}
	.order-3{
		background: url("../../static/images/live/order-3.png") no-repeat;
		background-size: 100%;
	}
	.online{
		z-index: 9;
		margin-right: -25rpx;
	}
	.watch-num{
		padding: 10rpx 20rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 32rpx 0px 0px 32rpx;
		text-align: center;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
</style>